import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile'

import { Link } from 'react-router-dom'

import NavHeader from '../../components/NavHeader'
import { userLogin } from '../../api/user'
import styles from './index.module.css'

// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

class Login extends Component {
  state = {
    user: {
      username: 'hkzf66',
      password: 'test2',
    },
  }

  // 点击登录按钮
  onLogin = async (e) => {
    e.preventDefault()
    const { username, password } = this.state.user
    if (username.trim() === '' || password.trim() === '') {
      return Toast.info('用户名和密码不能为空', 2, null, false)
    }

    if (!REG_UNAME.test(username)) {
      return Toast.info('用户名格式5-8位的字母和数字', 2, null, false)
    }

    if (!REG_PWD.test(password)) {
      return Toast.info('密码格式5-12位的字母和数字', 2, null, false)
    }

    const { data: res } = await userLogin({ ...this.state.user })
    localStorage.setItem('HKZF_TOKEN', res.body.token)
    const { formPath } = this.props.location
    console.log(this.props.location)
    Toast.success(
      '登录成功',
      2,
      () => {
        if (formPath) {
          this.props.history.push(formPath)
        } else {
          this.props.history.go(-1)
        }
      },
      false
    )
  }

  // 获取用户名和密码
  onChange = (e) => {
    this.setState({
      user: {
        ...this.state.user,
        [e.target.name]: e.target.value,
      },
    })
  }

  render() {
    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>账号登录</NavHeader>
        <WhiteSpace size="xl" />

        {/* 登录表单 */}
        <WingBlank>
          <form>
            <div className={styles.formItem}>
              <input
                className={styles.input}
                name="username"
                placeholder="请输入账号"
                value={this.state.user.username}
                onChange={this.onChange}
              />
            </div>
            {/* 长度为5到8位，只能出现数字、字母、下划线 */}
            {/* <div className={styles.error}>账号为必填项</div> */}
            <div className={styles.formItem}>
              <input
                className={styles.input}
                name="password"
                type="password"
                placeholder="请输入密码"
                value={this.state.user.password}
                onChange={this.onChange}
              />
            </div>
            {/* 长度为5到12位，只能出现数字、字母、下划线 */}
            {/* <div className={styles.error}>账号为必填项</div> */}
            <div className={styles.formSubmit}>
              <button
                onClick={this.onLogin}
                className={styles.submit}
                type="submit"
              >
                登 录
              </button>
            </div>
          </form>
          <Flex className={styles.backHome}>
            <Flex.Item>
              <Link to="/registe">还没有账号，去注册~</Link>
            </Flex.Item>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}

export default Login
